<!DOCTYPE html>
<html lang="it">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>Music Insieme</title>
  <meta content="" name="music">

  <!-- Favicons -->
  <link href="assets/img/favicon.png" rel="icon">
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="assets/css/style.css" rel="stylesheet">

</head>

<body>
	 <main id="main">
	<!-- ======= banner ======= -->
	    <div id="banner" class="banner">
	      <div>
	
	            <div class="banner-slider swiper">
	              <div class="swiper-wrapper align-items-center">
	
	                <div class="swiper-slide">
	                  <img src="assets/img/bg5.png" alt="" width=100% height=100%>
	                </div>
	
	                <div class="swiper-slide">
	                  <img src="assets/img/bg3.png" alt="" width=100% height=100%>
	                </div>
					
					<div class="swiper-slide">
					  <img src="assets/img/bg7.png" alt="" width=100% height=100%>
					</div>
	
	              </div>
	              <!--<div class="swiper-pagination"></div>
	            </div>-->
				
		</div><!-- End banner  -->
		
	</main><!-- End #main -->
  <!-- ======= Header ======= -->
  <header id="header">
		  
    <div class="container">

      <h1><a href="index.html">Music Insieme</a></h1>
      <h2>We are MUSICIANS from YAOHUA high school</h2>

      <nav id="navbar" class="navbar">
        <ul>
          <li><a class="nav-link active" href="#header">Home</a></li>
          <li><a class="nav-link" href="#message">Message</a></li>
          <li><a class="nav-link" href="#album">Album</a></li>
		  <li><a class="nav-link" href="#about">About</a></li>
          <li><a class="nav-link" href="#contact">Contact</a></li>
        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
      </nav><!-- .navbar -->

      <div class="social-links">
		<!-- <a href="https://www.facebook.com/sharer/sharer.php?u=http://www.baidu.com" target="_blank" class='facebook' ><i class="bi bi-facebook"></i></a> -->
        <a  class="baidu" href="javascript:void(0)" onclick="shareToTieba(event)"><i class="bi bi-share-fill"></i></a>
      </div>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=85 height=86 src="http://music.163.com/outchain/player?type=2&id=1923951024&auto=1&height=66"></iframe>
	<div id="translate"></div>
    </div>
	
  </header><!-- End Header -->

  <!-- ======= About Section ======= -->
  <section id="about" class="about" >

    <!-- ======= About Me ======= -->
    <div class="about-me container">

      <div class="section-title">
        <h2>About</h2>
        <p>Learn more about our website</p>
      </div>

      <div class="row">
        <div class="col-lg-4" data-aos="fade-right">
          <img src="assets/img/me.jpg" class="img-fluid" alt="">
        </div>
        <div class="col-lg-8 pt-4 pt-lg-0 content" data-aos="fade-left">
          <h3>Abstract—Struttura e layout—Target utente </h3>
          <!-- <p class="fst-italic"> -->
<p>
         Questo sito web è gestito dal Club musicale della YAOHUA HIGH SCHOOL. Se ci sono altri eventi musicali, li pubblicheremo anche su questo sito.
La mia scuola secondaria ha un club musicale e i membri del club scelgono la musica che preferiscono. Ogni giorno, all'ora di pranzo, la radio della scuola trasmetteva questa musica. Al liceo mi sono iscritta al club musicale della scuola, ma ho scoperto che la portata di questa attività era limitata al club e il resto della scuola non poteva partecipare. Così ho creato questo sito web in cui gli studenti di tutta la scuola possono collegarsi e inviare la loro musica preferita o anche la loro musica originale tramite MESSAGE. Ogni settimana sceglieremo la musica con il maggior numero di consensi e la faremo ascoltare a tutta la scuola!
La maggior parte degli studenti delle scuole secondarie ha una routine quotidiana con solo libri di testo e pochissimo intrattenimento. La musica può aiutare il nostro corpo e la nostra mente a sentirsi rilassati, a ridurre lo stress, a migliorare la creatività dei nostri studenti e fa bene alla nostra salute fisica e mentale! Ho creato questo sito web nella speranza che possa aiutare gli studenti stressati dalla scuola. Spero che questo sito aiuti gli studenti che sono sotto stress per lo studio a partecipare a varie attività musicali in modo semplice e veloce.
Spero che porti relax e piacere agli studenti a mezzogiorno!

          </p>
          <!-- <div class="row"> 每排两个-->
            <div class="col-lg-6">
              <ul>
                <li><i class="bi bi-chevron-right"></i> <strong style="color: #18D26E;">Home</strong> </li>
              </ul>
            </div>
			<p>
					Contiene: ①Commutazione multilingue(JavaScript) ②SHARE:Condividiamo la pagina su Baidu post ③Immagini rotanti: Immagini di sfondo dinamiche che aggiungono un senso di atmosfera.
			</p>
          <!-- </div> -->
		  <div class="col-lg-6">
		    <ul>
		      <li><i class="bi bi-chevron-right"></i> <strong style="color: #18D26E;">Message</strong> </li>
		    </ul>
		  </div>
		  <p>
		  		Questa è l'area messaggi del sito: gli studenti comunicano e interagiscono tra loro. (Al momento è solo una struttura)
		  </p>
		  <div class="col-lg-6">
		    <ul>
		      <li><i class="bi bi-chevron-right"></i> <strong style="color: #18D26E;">Album</strong> </li>
		    </ul>
		  </div>
		  <p>
		  		Mostra l'album fotografico del club.Le immagini sul sito web sono state scattate dai membri del Club della Stampa della scuola, che le hanno scattate personalmente.
		  </p>
		  <div class="col-lg-6">
		    <ul>
		      <li><i class="bi bi-chevron-right"></i> <strong style="color: #18D26E;">About</strong> </li>
		    </ul>
		  </div>
		  <p>
		  		Documento di presentazione di questo sito.(esame)
		  </p>
		  <div class="col-lg-6">
		    <ul>
		      <li><i class="bi bi-chevron-right"></i> <strong style="color: #18D26E;">Contact</strong> </li>
		    </ul>
		  </div>
          <p>
		Come promuovo il sito web che ho creato: online / affiggendo un annuncio nella bacheca della scuola.</p>	  
<p>Contattateci: commenti e suggerimenti da parte di tutti. Questo è ancora solo un sito immaturo, in seguito miglioreremo il mio sito.
                                 Link alle mie e-mail e alle mie piattaforme di social media.
                                </p>
  <p>Termini di comunicazione web </p>
 	                            <p> - almeno 20 like/retweet di un post sul mio sito web su uno social di mia scelta。 </p>
 	                            <p> - pubblicazione di un blog post riguardo al mio sito web。 </p>
                                 
                                 <p> Gli strumenti che utilizzo.  </p>
        </div>
      </div>

    </div><!-- End About Me -->

    <!-- ======= Counts ======= -->
    <div class="counts container">

      <div class="row">

        <div class="col-lg-3 col-md-6">
          <div class="count-box">
            <i class="bi bi-emoji-smile"></i>
            <span data-purecounter-start="0" data-purecounter-end="666" data-purecounter-duration="1" class="purecounter"></span>
            <p>Music</p>
          </div>
        </div>

        <div class="col-lg-3 col-md-6 mt-5 mt-md-0">
          <div class="count-box">
            <i class="bi bi-people"></i>
            <span data-purecounter-start="0" data-purecounter-end="34" data-purecounter-duration="1" class="purecounter"></span>
            <p>Membri</p>
          </div>
        </div>

        <div class="col-lg-3 col-md-6 mt-5 mt-lg-0">
          <div class="count-box">
            <i class="bi bi-headset"></i>
            <span data-purecounter-start="0" data-purecounter-end="123" data-purecounter-duration="1" class="purecounter"></span>
            <p>Attività</p>
          </div>
        </div>

        <div class="col-lg-3 col-md-6 mt-5 mt-lg-0">
          <div class="count-box">
            <i class="bi bi-award"></i>
            <span data-purecounter-start="0" data-purecounter-end="11" data-purecounter-duration="1" class="purecounter"></span>
            <p>Molti trofei</p>
          </div>
        </div>

      </div>

    </div><!-- End Counts -->


  </section><!-- End About Section -->

  <!-- ======= Message Section ======= -->
  <section id="message" class="message">
	<div class="container">
  
      <div class="section-title">
        <h2>Message</h2>
        <p>Please leave your ideas and works</p>
      </div>
  
      <div class="row">
            <div id="content" class="container">
              <div id="post">
                  <div><!-- input msg -->
					<textarea class="transition"></textarea>
                  </div>
                  <input id="postBt" type="button" style="border:none; background-color:#18d26e; color:white;border-radius:5px; width:80px; height:30px;" value="YES OK"/>
                 <!-- <input id="clearBt" type="button" style="border:none; background-color:#3EADC5; color:white;border-radius:5px; width:80px; height:30px;" value="清空"/> -->
             </div>
             <div id="comment"></div>
              </div>
          </div>
         
      </div>
  
    </div>
  </section><!-- End Message Section -->

  <!-- ======= Album Section ======= -->
  <section id="album" class="album">
    <div class="container">

      <div class="section-title">
        <h2>Album</h2>
        <p>Our Album</p>
      </div>

      <div class="row">
        <div class="col-lg-4 col-md-6 d-flex align-items-stretch">
          <div class="icon-box">
			<div class="icon"><i class="bx bx-music"></i></div>
            <h4><a href="album-show.html?type=1d">Attività del club</a></h4>
            <p>Cliccate per vedere le foto delle attività del club.</p>
          </div>
        </div>

        <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0">
          <div class="icon-box">
            <div class="icon"><i class="bx bx-album"></i></div>
            <h4><a href="album-show.html?type=2d">L'ambiente del Club</a></h4>
            <p>Cliccate per vedere l'elegante ambiente del club.</p>
          </div>
        </div>

        <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0">
          <div class="icon-box">
            <div class="icon"><i class="bx bx-play"></i></div>
            <h4><a href="album-show.html?type=3d">I membri del Club</a></h4>
            <p>Cliccate per vedere i membri del club.</p>
          </div>
        </div>


      </div>

    </div>
  </section><!-- End Album Section -->
  


  <!-- ======= Contact Section ======= -->
  <section id="contact" class="contact">
    <div class="container">

      <div class="section-title">
        <h2>Contact</h2>
        <p>Contact Me</p>
      </div>

      <div class="row mt-2">
        <div class="col-md-6 d-flex align-items-stretch">
          <div class="info-box">
            <i class="bx bx-envelope"></i>
            <h3>Email Me</h3>
            <p>peiyao.xu@studio.unibo.it</p>
          </div>
        </div>

        <div class="col-md-6 mt-4 mt-md-0 d-flex align-items-stretch">
          <div class="info-box">
            <i class="bx bx-share-alt"></i>
            <h3>Social Profiles</h3>
            <div class="social-links">
			  <a  class="baidu" href="javascript:void(0)" onclick="shareToTieba(event)"><i class="bi bi-share"></i></a>
			</div>
          </div>
        </div>

      </div>

      <form class="send-message mt-4">
        <div class="row">
          <div class="col-md-6 form-group">
            <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required>
          </div>
          <div class="col-md-6 form-group mt-3 mt-md-0">
            <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
          </div>
        </div>
        <div class="form-group mt-3">
          <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required>
        </div>
        <div class="form-group mt-3">
          <textarea class="form-control" name="message" rows="5" placeholder="Message" required></textarea>
        </div>
        <div class="my-3">
          <div class="loading">Loading</div>
          <div class="error-message"></div>
          <div class="sent-message">Your message has been sent. Thank you!</div>
        </div>
        <div class="text-center"><button id='btn' type="submit" onclick="alert('Submit Success!')">Send Message</button></div>
      </form>

    </div>
  </section><!-- End Contact Section -->

	<div class="corpright">
			    ©2022 <a href="#">Peiyao Xu</a>
		</div>
  <!-- Vendor JS Files -->
  <script src="assets/vendor/purecounter/purecounter.js"></script>
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>

  <!-- Template Main JS File -->
  <script src="assets/js/main.js"></script>
  <!-- Template Msg JS File -->
  <script src="assets/js/msg.js"></script>
  
  <!-- <script src="http://res.zvo.cn/translate/translate.js"></script> -->
  <script src="./assets/js/translate.js"></script>
  <script>
  //进行翻译
  translate.execute();
  </script>
  <style>
  .translateSelectLanguage{
    position: absolute;
    bottom:100px;
    right:50px;
	color: #18D26E;
	
  }
  </style>
  <script>
    translate.includedLanguages = 'zh-CN,en,it';  //注意要放到 translate.execute(); 上面
    translate.execute();
  </script>
</body>

</html>